<template>
  <div class="my-pie">
    <div class="pie-1"></div>
    <div class="pie-2"></div>
    <div class="pie-3"></div>
    <div class="pie-4"></div>
    <div class="pie-11"></div>
    <div class="pie-12"></div>
    <div class="pie-13"></div>
    <div class="pie-14"></div>
    <div class="pie-15"></div>

    <div class="pie-18"></div>
    <div class="pie-20"></div>
    <div class="pie-17"></div>
    <div class="pie-19"></div>
    <div class="pie-16"></div>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: [
        {
          title: "",
          toolTip: "",
          value: 70,
          color: 0x33ccff,
        },
        {
          title: "",
          toolTip: "",
          value: 50,
          color: 0x6699ff,
        },
        {
          title: "",
          toolTip: "",
          value: 40,
          color: 0xff33ff,
        },
        {
          title: "",
          toolTip: "",
          value: 20,
          color: 0xff88c2,
        },
      ],
    };
  },
  created() {},
  computed: {
    counter() {
      return this.$store.state.counter;
    },
  },
  watch: {},
  mounted() {
    this.initPie();
  },
  methods: {
    initPie() {
      this.drawLChart("pie", "pie-1", this.data, {
        manifest: {
          ladder: false,
          separation: false,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-2", this.data, {
        manifest: {
          ladder: false,
          separation: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-3", this.data, {
        manifest: {
          ladder: true,
          separation: false,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-4", this.data, {
        manifest: {
          ladder: true,
          separation: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });

      this.drawLChart("pie", "pie-11", this.data, {
        manifest: {
          ladder: false,
          separation: false,
          loop: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-12", this.data, {
        manifest: {
          ladder: false,
          separation: true,
          loop: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-13", this.data, {
        manifest: {
          ladder: true,
          separation: false,
          loop: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-14", this.data, {
        manifest: {
          ladder: true,
          separation: true,
          loop: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });

      this.drawLChart("pie", "pie-15", this.data, {
        manifest: {
          concentric: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
      this.drawLChart("pie", "pie-16", this.data, {
        manifest: {
          concentricLoop: true,
        },
        cameraOpt: {
          width: 450,
          height: 380,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.my-pie {
  display: flex;
  flex-wrap: wrap;
}
</style>
